<template>
	<!-- <el-card>
		<el-form ref="queryForm" :inline="true">
			<el-form-item prop="postCode" label="关键词:">
				<el-input v-model="state.queryParams.keywords" placeholder="关键词"></el-input>
			</el-form-item>

			<el-form-item>
				<el-button icon="Search" type="primary" @click="handleSearch">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button icon="RefreshRight" @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card> -->

	<el-card>
		<el-table
			v-loading="state.dataListLoading"
			:data="dataList"
			class="mt20"
			stripe
			element-loading-background="rgba(0, 0, 0, 0.5)"
			element-loading-text="加载中..."
			header-row-class-name="table-header"
		>
			<el-table-column type="index" label="序号" header-align="center" align="center" width="60"></el-table-column>
			<el-table-column label="批文年度" align="center" prop="approvalFileYear" width="160" />
			<el-table-column label="批文号" align="center" prop="approvalFileNumber" />
			<el-table-column label="发布日期" align="center" prop="approvalPublishDate" width="160">
				<template #default="scope">
					<span v-if="scope.row.approvalPublishDate">{{ scope.row.approvalPublishDate.slice(0, 10) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="批文" align="center" prop="approvalFile">
				<template #default="scope">
					<span
						type="success"
						style="margin-left: 5px; cursor: pointer; text-decoration: underline"
						@click="handleUploadPdfPreview(scope.row.approvalFile)"
					>
						{{ scope.row.approvalFile.fileName }}
					</span>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.pageNum"
			:page-size="state.pageSize"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		></el-pagination>
	</el-card>
</template>
<script setup lang="ts">
import { lixiangpiwenList } from '@/api/other/index'
import { filePreviewByName } from '@/api/sys/upload'
import { reactive, ref, watch } from 'vue'

const props = defineProps({
	step: {
		type: String,
		default: ''
	}
})

const state = reactive({
	queryParams: {
		condition: ''
	},
	pageNum: 1,
	pageSize: 10,
	total: 1,
	dataListLoading: false
})
const dataList = ref([])

watch(
	() => props.step,
	newVal => {
		if (newVal === 'second') {
			getDataList()
		}
	}
)

const getDataList = () => {
	state.dataListLoading = true
	lixiangpiwenList({
		pageNum: state.pageNum,
		pageSize: state.pageSize
	}).then(res => {
		state.dataListLoading = false
		dataList.value = res.data.list || []
		state.total = res.data.total || 0
	})
}

const sizeChangeHandle = (val: number) => {
	state.pageSize = val
	getDataList()
}

const currentChangeHandle = (val: number) => {
	state.pageNum = val
	getDataList()
}

const handleUploadPdfPreview = (ruploadFile: any) => {
	if (ruploadFile.systemFileName) {
		filePreviewByName(ruploadFile.systemFileName).then(res => {
			window.open(res.data.url)
		})
	} else {
		filePreviewByName(ruploadFile?.response.data.systemFileName).then(res => {
			window.open(res.data.url)
		})
	}
}
</script>

<style lang="scss" scoped></style>
